
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>YUI Library Examples: Console: Creating a Console for debugging</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    	<link rel="stylesheet" type="text/css" href="../../assets/yui.css" >

<style>
    /*Supplemental CSS for the YUI distribution*/
    #custom-doc { width: 95%; min-width: 950px; }
    #pagetitle {background-image: url(../../assets/bg_hd.gif);}
/*    #pagetitle h1 {background-image: url(../../assets/title_h_bg.gif);}*/
</style>

<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yui/yui-min.js"></script>
<style type="text/css">
#basic, #add_to_bottom {
    position: static;
}

#demo .yui-console .yui-console-title {
    border: 0 none;
    color: #000;
    font-size: 13px;
    font-weight: bold;
    margin: 0;
    text-transform: none;
}
#demo .yui-console .yui-console-entry-meta {
    margin: 0;
}
</style>

</head>
<body id="yahoo-com" class=" yui-skin-sam">
<div id="custom-doc" class="yui-t2">
<div id="hd">
	<div id="ygunav">
		<p>
            <em>
                <a href="http://developer.yahoo.com/yui/3/">YUI 3.x Home</a> <i> - </i>	
            </em>
		</p>
		<form action="http://search.yahoo.com/search" id="sitesearchform">
            <input name="vs" type="hidden" value="developer.yahoo.com">
            <input name="vs" type="hidden" value="yuiblog.com">
		    <div id="sitesearch">
		    	<label for="searchinput">Site Search (YDN &amp; YUIBlog): </label>
			    <input type="text" id="searchinput" name="p">
			    <input type="submit" value="Search" id="searchsubmit" class="ygbt">
		    </div>
		</form>
    </div>
	<div id="ygma"><a href="../../"><img src="../../assets/logo.gif"  border="0" width="200" height="93"></a></div>
	<div id="pagetitle"><h1>YUI Library Examples: Console: Creating a Console for debugging</h1></div>
</div>
<div id="bd">

	<div id="bar-note"><p><strong>Note:</strong> This is YUI 3.x. Looking for <a href="http://developer.yahoo.com/yui/">YUI 2.x</a>?</p></div>

	<div id="yui-main">
		<div class="yui-b">
		  <div class="yui-ge">
			  <div class="yui-u first example" id="main">

	<h2>Console: Creating a Console for debugging</h2>

	<div id="example" class="promo">
	<p>
	<p>This example walks through the basics of setting up and logging messages to a YUI Console instance.  Three Console instances are created with slightly different configurations.  All calls to <code>Y.log(..)</code> will be broadcast to every Console.</p>
	</p>	

	<div class="module example-container ">
			<div class="hd exampleHd">
			<p class="newWindowButton yui-skin-sam">
                <a href="console_basic_clean.html" target="_blank">View example in new window.</a>
            </p>
		</div>		<div id="example-canvas" class="bd">

		
	<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
	
	<div id="demo">
    <h4>Basic Console</h4>
    <div id="basic"></div>
    <p>
        <button type="button" id="toggle_basic">hide console</button>
    </p>

    <h4>New messages added to bottom</h4>
    <div id="add_to_bottom"><div></div></div>
    <p>
        <button type="button" id="toggle_atb">show console</button>
    </p>

    <h4>Custom strings</h4>
    <p><em>Rendered in default location (top right)</em></p>
    <p>
        <button type="button" id="toggle_cstrings">show console</button>
    </p>

    <h4>Log some messages</h4>
    <p>
        <input type="text" id="info_text" value="I'm an info message!">
        <button type="button" id="info">log info message</button>
    </p>
    <p>
        <input type="text" id="warn_text" value="I'm a warning!">
        <button type="button" id="warn">log warning</button>
    </p>
    <p>
        <input type="text" id="error_text" value="I'm an error!">
        <button type="button" id="error">log error</button>
    </p>
</div>
<script type="text/javascript">
// Create a YUI instance and request the console module and its dependencies
YUI({base:"../../build/", timeout: 10000}).use("console", function (Y) {

// To eliminate duplicate reporting in native console in supporting browsers
Y.config.useBrowserConsole = false;

// Create and render the three Console instances
var basic, newOnBottom, customStrings;

basic = new Y.Console({
    boundingBox: '#basic'
}).render();

newOnBottom = new Y.Console({
    boundingBox: '#add_to_bottom',
    contentBox:  '#add_to_bottom > div',
    newestOnTop: false,
    visible: false
}).render();

customStrings = new Y.Console({
    strings: {
        title : 'Console with custom strings!',
        pause : 'Wait',
        clear : 'Flush',
        collapse : 'Shrink',
        expand : 'Grow'
    },
    visible: false
}).render();

// Set up the button listeners
function toggle(e,cnsl) {
    if (cnsl.get('visible')) {
        cnsl.hide();
        this.set('innerHTML','show console');
    } else {
        cnsl.show();
        this.set('innerHTML','hide console');
    }
}

Y.get('#toggle_basic').on('click',    toggle, null, basic);
Y.get('#toggle_atb').on('click',      toggle, null, newOnBottom);
Y.get('#toggle_cstrings').on('click', toggle, null, customStrings);

Y.get('#info').on('click', function () {
    Y.log(Y.get('#info_text').get('value'), 'info');
});
Y.get('#warn').on('click', function () {
    Y.log(Y.get('#warn_text').get('value'), 'warn');
});
Y.get('#error').on('click', function () {
    Y.log(Y.get('#error_text').get('value'), 'error');
});

});
</script>
	
	<!--END SOURCE CODE FOR EXAMPLE =============================== -->
	
		
		</div>
	</div>			
	</div>
		
	<h3>Markup not required</h3>
<p>The primary purpose of the Console is to aid in debugging your application.  As such, it doesn't make much sense to require your page to include markup for something that is not bound for production.</p>

<p><em>However</em>, Console is built on the Widget framework, so for this example, we'll illustrate three ways to place a Console instance on the page:</p>
<ol>
    <li>Providing a <code>boundingBox</code> node reference.</li>
    <li>Providing both <code>boundingBox</code> and <code>contentBox</code> references.</li>
    <li>Using the default rendering behavior.</li>
</ol>

<p>For the first two cases, we need to set up some markup.  We'll throw in some placeholder content for the third.</p>

<textarea name="code" class="HTML" cols="60" rows="1">
<h4>Basic Console</h4>
<div id="basic"></div>

<h4>New messages added to bottom</h4>
<div id="add_to_bottom"><div></div></div>

<h4>Custom strings</h4>
<p><em>Rendered in default location (top right)</em></p>
</textarea>

<p>Then instantiate the Console instances.</p>

<textarea name="code" class="JScript" cols="60" rows="1">
// Create a YUI instance and request the console module and its dependencies
YUI({base:"../../build/", timeout: 10000}).use("console", function (Y) {

// Create and render the three Console instances
var basic, newOnBottom, customStrings;

basic = new Y.Console({
    boundingBox: '#basic'
}).render(); // note the inline render()

newOnBottom = new Y.Console({
    boundingBox: '#add_to_bottom',
    contentBox:  '#add_to_bottom > div',
    newestOnTop: false,
    visible: false  // hidden at instantiation
}).render();

customStrings = new Y.Console({
    strings: {
        title : 'Console with custom strings!',
        pause : 'Wait',
        clear : 'Flush',
        collapse : 'Shrink',
        expand : 'Grow'
    },
    visible: false  // hidden at instantiation
}).render();

});
</textarea>

<h3>Log some messages</h3>
<p>In your code, inserting calls to <code>Y.log(..)</code> will cause the content of those log messages to be broadcast to every Console instance present in the YUI instance.  We'll illustrate this by creating some buttons to log various types of messages.</p>

<textarea name="code" class="JScript" cols="60" rows="1">
// Create a YUI instance and request the console module and its dependencies
YUI({base:"../../build/", timeout: 10000}).use("console", function (Y) {

// To eliminate duplicate reporting in native console in supporting browsers
Y.config.useBrowserConsole = false;

// Create and render the three Console instances
var basic, newOnBottom, customStrings;

...

Y.get('#info').on('click', function () {
    Y.log(Y.get('#info_text').get('value'), 'info');
});
Y.get('#warn').on('click', function () {
    Y.log(Y.get('#warn_text').get('value'), 'warn');
});
Y.get('#error').on('click', function () {
    Y.log(Y.get('#error_text').get('value'), 'error');
});

});
</textarea>

<h3>A touch of CSS</h3>
<p>For this example, it was more appropriate for the Consoles to be nested in the content for coherency.  To facilitate this, the default absolute positioning for the first two Consoles was overridden to <code>static</code>.  Also, some page styles cascaded to the Consoles, so a handful of other styles needed to be forcibly reapplied using more specific selectors.  The CSS is included below.</p>


<h3 id="full_code_listing">Full Code Listing</h3>

<h4>Markup</h4>

<textarea name="code" class="HTML" cols="60" rows="1">
<div id="demo">
    <h4>Basic Console</h4>
    <div id="basic"></div>
    <p>
        <button type="button" id="toggle_basic">hide console</button>
    </p>

    <h4>New messages added to bottom</h4>
    <div id="add_to_bottom"><div></div></div>
    <p>
        <button type="button" id="toggle_atb">show console</button>
    </p>

    <h4>Custom strings</h4>
    <p><em>Rendered in default location (top right)</em></p>
    <p>
        <button type="button" id="toggle_cstrings">show console</button>
    </p>

    <h4>Log some messages</h4>
    <p>
        <input type="text" id="info_text" value="I'm an info message!">
        <button type="button" id="info">log info message</button>
    </p>
    <p>
        <input type="text" id="warn_text" value="I'm a warning!">
        <button type="button" id="warn">log warning</button>
    </p>
    <p>
        <input type="text" id="error_text" value="I'm an error!">
        <button type="button" id="error">log error</button>
    </p>
</div>
</textarea>

<h4>JavaScript</h4>

<textarea name="code" class="JScript" cols="60" rows="1">
// Create a YUI instance and request the console module and its dependencies
YUI({base:"../../build/", timeout: 10000}).use("console", function (Y) {

// To eliminate duplicate reporting in native console in supporting browsers
Y.config.useBrowserConsole = false;

// Create and render the three Console instances
var basic, newOnBottom, customStrings;

basic = new Y.Console({
    boundingBox: '#basic'
}).render();

newOnBottom = new Y.Console({
    boundingBox: '#add_to_bottom',
    contentBox:  '#add_to_bottom > div',
    newestOnTop: false,
    visible: false
}).render();

customStrings = new Y.Console({
    strings: {
        title : 'Console with custom strings!',
        pause : 'Wait',
        clear : 'Flush'
    },
    visible: false
}).render();

// Set up the button listeners
function toggle(e,cnsl) {
    if (cnsl.get('visible')) {
        cnsl.hide();
        this.set('innerHTML','show console');
    } else {
        cnsl.show();
        this.set('innerHTML','hide console');
    }
}

Y.get('#toggle_basic').on('click',    toggle, null, basic);
Y.get('#toggle_atb').on('click',      toggle, null, newOnBottom);
Y.get('#toggle_cstrings').on('click', toggle, null, customStrings);

Y.get('#info').on('click', function () {
    Y.log(Y.get('#info_text').get('value'), 'info');
});
Y.get('#warn').on('click', function () {
    Y.log(Y.get('#warn_text').get('value'), 'warn');
});
Y.get('#error').on('click', function () {
    Y.log(Y.get('#error_text').get('value'), 'error');
});

});
</textarea>

<h4>CSS</h4>

<textarea name="code" class="CSS" cols="60" rows="1">
/* Override default positioning for two of the example Consoles */
#basic, #add_to_bottom {
    position: static;
}

/* Reapply some style settings that were overridden by the page chrome */
#demo .yui-console .yui-console-title {
    border: 0 none;
    color: #000;
    font-size: 13px;
    font-weight: bold;
    margin: 0;
    text-transform: none;
}
#demo .yui-console .yui-console-entry-meta {
    margin: 0;
}
</textarea>
				</div>
				<div class="yui-u sidebar">
					
				
					<div id="examples" class="mod box4">
                        <div class="hd">
						<h4>
    Console Examples:</h4>
                        </div>
						<div class="bd">
							<ul>
								<li class='selected'><a href='../console/console_basic.html'>Creating a Console for debugging</a></li><li><a href='../console/console_yui_config.html'>YUI configuration to filter log messages</a></li><li><a href='../console/console_filter.html'>Using the ConsoleFilters plugin</a></li><li><a href='../console/console_global.html'>Creating a universal Console</a></li>							</ul>
						</div>
					</div>
					
					<div class="mod box4">
                        <div class="hd">
						<h4>More Console Resources:</h4>
                        </div>
                        <div class="bd">
						<ul>
							<!-- <li><a href="http://developer.yahoo.com/yui/console/">User's Guide</a> (external)</li> -->
						<li><a href="../../api/module_console.html">API Documentation</a></li>
</ul>
                        </div>
					</div>
			  </div>
		</div>
		
		</div>
	</div>


<div class="yui-b toc3" id="tocWrapper">
<!-- TABLE OF CONTENTS -->
<div id="toc">
	
<ul>
<li class="sect first">YUI 3.x Project</li><li class="item"><a title="The Yahoo! User Interface (YUI) Library, 3.x Branch, " href="http://developer.yahoo.com/yui/3/">YUI 3 Web Site (external)</a></li><li class="item"><a title="Examples of every YUI utility and control in action" href="../../examples/">YUI 3 Examples</a></li><li class="item"><a title="Instantly searchable API documentation for the entire YUI library." href="../../api/">YUI 3 API Docs</a></li><li class="item"><a title="The YUI Library can be downloaded from SourceForge" href="http://sourceforge.net/projects/yui/">YUI 3 on Sourceforge (external)</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/3/license.html">YUI License (external)</a></li><li class="sect">YUI 3 Core - Examples</li><li class="item"><a title="YUI (Global Prerequisite) - Functional Examples" href="../../examples/yui/index.html">YUI (Global Prerequisite)</a></li><li class="item"><a title="Event - Functional Examples" href="../../examples/event/index.html">Event</a></li><li class="item"><a title="Node - Functional Examples" href="../../examples/node/index.html">Node</a></li><li class="sect">YUI 3 Component Infrastructure - Examples</li><li class="item"><a title="Attribute - Functional Examples" href="../../examples/attribute/index.html">Attribute</a></li><li class="item"><a title="Plugin - Functional Examples" href="../../examples/plugin/index.html">Plugin</a></li><li class="item"><a title="Widget - Functional Examples" href="../../examples/widget/index.html">Widget</a></li><li class="sect">YUI 3 Utilities - Examples</li><li class="item"><a title="Animation - Functional Examples" href="../../examples/anim/index.html">Animation</a></li><li class="item"><a title="Cache - Functional Examples" href="../../examples/cache/index.html">Cache</a></li><li class="item"><a title="Cookie - Functional Examples" href="../../examples/cookie/index.html">Cookie</a></li><li class="item"><a title="DataSchema - Functional Examples" href="../../examples/dataschema/index.html">DataSchema</a></li><li class="item"><a title="DataSource - Functional Examples" href="../../examples/datasource/index.html">DataSource</a></li><li class="item"><a title="DataType - Functional Examples" href="../../examples/datatype/index.html">DataType</a></li><li class="item"><a title="Drag &amp; Drop - Functional Examples" href="../../examples/dd/index.html">Drag &amp; Drop</a></li><li class="item"><a title="Get - Functional Examples" href="../../examples/get/index.html">Get</a></li><li class="item"><a title="History - Functional Examples" href="../../examples/history/index.html">History</a></li><li class="item"><a title="ImageLoader - Functional Examples" href="../../examples/imageloader/index.html">ImageLoader</a></li><li class="item"><a title="IO - Functional Examples" href="../../examples/io/index.html">IO</a></li><li class="item"><a title="JSON (JavaScript Object Notation) - Functional Examples" href="../../examples/json/index.html">JSON</a></li><li class="item"><a title="Queue - Functional Examples" href="../../examples/queue/index.html">Queue</a></li><li class="item"><a title="Stylesheet - Functional Examples" href="../../examples/stylesheet/index.html">Stylesheet</a></li><li class="sect">YUI 3 Widgets - Examples</li><li class="item"><a title="Overlay - Functional Examples" href="../../examples/overlay/index.html">Overlay</a></li><li class="item"><a title="Slider - Functional Examples" href="../../examples/slider/index.html">Slider</a></li><li class="sect">YUI 3 Node Plugins - Examples</li><li class="item"><a title="FocusManager Node Plugin - Functional Examples" href="../../examples/node-focusmanager/index.html">FocusManager Node Plugin</a></li><li class="item"><a title="MenuNav Node Plugin - Functional Examples" href="../../examples/node-menunav/index.html">MenuNav Node Plugin</a></li><li class="sect">YUI 3 CSS - Examples</li><li class="item"><a title="YUI CSS Reset - Functional Examples" href="../../examples/cssreset/index.html">CSS Reset</a></li><li class="item"><a title="YUI Fonts - Functional Examples" href="../../examples/cssfonts/index.html">CSS Fonts</a></li><li class="item"><a title="YUI Base - Functional Examples" href="../../examples/cssbase/index.html">CSS Base</a></li><li class="sect">YUI 3 Developer Tools - Examples</li><li class="selected "><a title="Console - Functional Examples" href="../../examples/console/index.html">Console</a></li><li class="item"><a title="Profiler - Functional Examples" href="../../examples/profiler/index.html">Profiler</a></li><li class="item"><a title="Test - Functional Examples" href="../../examples/test/index.html">Test</a></li><li class="sect">The YUI Community</li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUI Blog (external)</a></li><li class="item"><a title="The Yahoo! Group YDN-JavaScript hosts the YUI community forum" href="http://tech.groups.yahoo.com/group/ydn-javascript/">YUI Forum (external)</a></li><li class="item"><a title="The Yahoo! Group yui3 is dedicated to the 3.x branch of the Yahoo! User Interface (YUI) Library." href="http://tech.groups.yahoo.com/group/yui3/">YUI 3 Forum (external)</a></li><li class="item"><a title="YUI is used by Yahoo! and by hundreds of other sites, including many you know and love." href="/yui/poweredby/">YUI Sightings (external)</a></li><li class="item"><a title="Videos and podcasts from the YUI Team and from the Yahoo! frontend engineering community." href="http://developer.yahoo.com/yui/theater/">YUI Theater (external)</a></li><li class="sect">YUI Articles on the YUI Website</li><li class="item"><a title="Answers to Frequently Asked Questions about the YUI Library" href="http://developer.yahoo.com/yui/articles/faq/">YUI FAQ (external)</a></li><li class="item"><a title="Yahoo!'s philosophy of Graded Browser Support" href="http://developer.yahoo.com/yui/articles/gbs/">Graded Browser Support (external)</a></li><li class="item"><a title="Reporting Bugs and Making Feature Requests for YUI Components" href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests (external)</a></li><li class="item"><a title="Serve YUI source files from Yahoo! -- free, fast, and simple" href="http://developer.yahoo.com/yui/3/articles/hosting/">Serving YUI Files from Yahoo! (external)</a></li></ul>
</div>
</div>
	</div><!--closes bd-->

	<div id="ft">
        <p class="first">Copyright &copy; 2009 Yahoo! Inc. All rights reserved.</p>
        <p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> - 
            <a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> - 
            <a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> - 
            <a href="http://careers.yahoo.com/">Job Openings</a></p>
	</div>
</div>
<script src="../../assets/dpSyntaxHighlighter.js"></script>
<script language="javascript"> 
dp.SyntaxHighlighter.HighlightAll('code'); 
</script>
</body>
</html>
